<template>
    <el-container class="containerMess">
        <el-card class="headerForm">
            <el-header>
                <span style="line-Height:72px,font-Size:13px">系统通知</span>
            </el-header>
        </el-card>
        <el-main>
            <el-card class="Img">
                <div class="box">
                    <div class="card" v-for="(item,index) in list" :key="index">
                        <p
                            style="width:400px;display:inline-block;color:#111;font-size:16px;margin-left:10px;text-align:left;">
                            {{item.title}}</p>
                        <p
                            style="margin:20px 145px 0 18px;font-size:14px;color: #7d8090; margin-top: 20px;text-align:left;">
                            {{item.content}}
                        </p>
                        <p class="card-data">9-20</p>
                        <button class="btn">常见问题解答</button>
                    </div>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>
<script setup lang="ts">
const list: any[] = [
    {
        title: "1829297_tUXi，快去“我的练习室”实现本周小目标！",
        content: "在这里，你将有很多伙伴:练习室同学们，和你一起学习、群内交流,课程的老师们,为你答疑解惑、在线指导,中舞网小助手,教会你使用学舞练舞功能， 系统智能提醒，循序渐进，坚持就能成功！",
    },
    {
        title: "15537289_yyhh,欢迎来到",
        content: "在移动互联网时代，我们每个人每天都可以接收到无数消息通知。那么在用户不断被繁杂琐碎的消息覆盖的情况下，产品如何让消息高效精准地触达用户、并且让用户可以及时便利地反馈平台呢？本文作者就阐述了消息通知系统设计的几大要点，相信会对你有所启发。",
    }

]
</script>
<style scoped>
.Img {
    width: 960px;
    height: 600px;
}

.Img .box {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 600px;

}

.containerMess {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.headerForm {
    margin-top: 20px;
    width: 960px;
    height: 72px;
}

.card {
    margin-top: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
    width: 960px;
    height: 130px;
}

.card-data {
    color: #7d8090;
    font-size: 14px;
    position: absolute;
    top: 15px;
    right: 18px;
    margin: 0;
}

.btn {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 100px;
    height: 40px;
    background-color: #f93684;
    color: white;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
}
</style>